<template>
  <div class="login">
    <nav>
      <van-nav-bar left-arrow @click-left="onClickLeft" />
    </nav>

    <main>
      <h1>账号密码登录</h1>

      <div class="log">
        <van-form @submit="onSubmit">
          <van-field
            v-model="rulesForm.username"
            name="username"
            label="用户名"
            placeholder="用户名/手机号/邮箱号"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="rulesForm.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 30px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>

      <router-link to="/register" class="reg">新用户注册</router-link>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rulesForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      // 获取数据
      this.$store.dispatch("user/loginAction", this.rulesForm);
    },
  },
  computed: {
    getData() {
      return this.$store.state.user.userInfo;
    },
  },
};
</script>

<style src="../assets/css/login.css" scoped>
</style>